import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const state = reactive({
      selectedKeys: ["bilibili"],
      collapsed: true,
      routes: [
        {
          name: "bilibili",
          path: "bilibili",
          title: "B站",
          icon: "fa fa-television",
        },
        {
          name: "douban",
          path: "douban",
          title: "豆瓣",
          icon: "fa fa-television",
        },
      ],
    });
    const router = useRouter();
    const handleMenuClick = (data: { key: string }) => {
      state.selectedKeys = [data.key];
      router.push({
        name: data.key,
      });
    };
    return () => {
      return (
        <div class="full">
          <a-layout class="full">
            <a-layout-sider
              collapsed={state.collapsed}
              trigger={null}
              collapsible
            >
              <a-menu
                theme="dark"
                mode="inline"
                onClick={handleMenuClick}
                selectedKeys={state.selectedKeys}
              >
                {state.routes.map((item) => {
                  return (
                    <a-menu-item key={item.name}>
                      <span class="anticon anticon-video-camera">
                        <i class={item.icon} aria-hidden="true"></i>
                      </span>
                      <span>{item.title}</span>
                    </a-menu-item>
                  );
                })}
              </a-menu>
            </a-layout-sider>
            <a-layout>
              <router-view />
            </a-layout>
          </a-layout>
        </div>
      );
    };
  },
});
